<template>
  <div class="background">
    <div style="padding=1vh">
      <div class="top">
        <div>
          <button class="button1" @click="giveRecommend">智能推荐</button>
          <!-- 智能推荐激发的弹窗 -->
          <el-dialog v-model="giveRecommendVisible" title="信息不足">
            <div class="recommend" style="margin-bottom: 20px,margin-top: 0;">
              <p>
                很抱歉，您所提供的信息不足，我们没有办法为您推荐订单，请您去到个人中心完善您的信息
              </p>
            </div>

            <el-button @click="btnUserPage">前去个人中心</el-button>
            <el-button @click="giveRecommendVisible = false">取消</el-button>
          </el-dialog>
        </div>
        <div class="post">
          <button class="button1" @click="postOrder">发布订单</button>

          <!--                            发布订单的弹窗-->

          <el-dialog
            class="abow_dialog"
            v-model="postOrderFormVisible"
            title="发布订单"
          >
            <el-form :model="postOrderForm">
              <el-form-item label="标题">
                <el-input
                  v-model="postOrderForm.title"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="工作日期时间">
                <el-date-picker
                  v-model="postOrderForm.start_end"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item label="类别">
                <el-radio-group v-model="postOrderForm.type">
                  <el-radio label="陪诊师" />
                  <el-radio label="收纳师" />
                  <el-radio label="带娃" />
                  <el-radio label="带宠" />
                  <el-radio label="其他" />
                </el-radio-group>
              </el-form-item>

              <el-form-item label="价格">
                <el-input-number v-model="postOrderForm.price" :step="5" />
              </el-form-item>

              <div>
                <!--                                    经纬度信息-->
              </div>
              <el-form-item label="目标人群">
                <el-select
                  v-model="postOrderForm.requirement"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in target_people"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="性别要求">
                <el-radio-group v-model="postOrderForm.gender_requirement">
                  <el-radio label="男" />
                  <el-radio label="女" />
                  <el-radio label="无" />
                </el-radio-group>
              </el-form-item>

              <el-form-item label="订单具体位置">
                <el-input v-model="postOrderForm.place_name" type="textarea" />
              </el-form-item>

              <el-form-item label="接单人要求">
                <el-input v-model="postOrderForm.demand" type="textarea" />
              </el-form-item>

              <el-form-item label="订单描述">
                <el-input v-model="postOrderForm.description" type="textarea" />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="checkForm"
                  >提交订单</el-button
                >
                <el-button @click="postOrderFormVisible = false"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>

        <div class="searchcontainer">
          <div class="icon">
            <el-icon>
              <Search />
            </el-icon>
          </div>
          <input
            type="text"
            placeholder="搜索你感兴趣的订单……"
            class="search"
            v-model="searchInput"
          />
          <button class="btnsearch" @click="search">搜索</button>
        </div>

        <div class="sf">
          <el-container style="justify-content: end">
            <button class="button1" @click="toggleRadioGroup">
              {{ buttonLabel }}
            </button>
          </el-container>
        </div>
      </div>
      <div class="subtop">
        <div
          class="selected-conditions"
          v-if="
            this.distance ||
            this.age ||
            this.gender ||
            this.type ||
            this.duration ||
            (this.work_date && this.work_date !== '仅看指定日期') ||
            this.wage ||
            this.rate ||
            this.distanceOrder ||
            this.durationOrder ||
            (this.minHourlyWage && this.maxHourlyWage)
          "
        >
          <div class="radiotitle2">已选条件：</div>
          <div v-if="this.distance" class="condition">
            <button class="condition-button">
              {{ distance }}
              <span class="remove" @click="removeSelectedCondition1()"> ×</span>
            </button>
          </div>
          <div v-if="this.age" class="condition">
            <button class="condition-button">
              {{ age
              }}<span class="remove" @click="removeSelectedCondition2()">
                ×</span
              >
            </button>
          </div>
          <div v-if="this.gender" class="condition">
            <button class="condition-button">
              {{ gender }}
              <span class="remove" @click="removeSelectedCondition3()"> ×</span>
            </button>
          </div>
          <div
            v-if="this.maxHourlyWage && this.minHourlyWage"
            class="condition"
          >
            <button class="condition-button">
              {{ minHourlyWage }}-{{ maxHourlyWage }}￥<span
                class="remove"
                @click="removeSelectedCondition11()"
              >
                ×</span
              >
            </button>
          </div>
          <div v-if="this.type" class="condition">
            <button class="condition-button">
              {{ type
              }}<span class="remove" @click="removeSelectedCondition4()">
                ×</span
              >
            </button>
          </div>
          <div v-if="this.duration" class="condition">
            <button class="condition-button">
              {{ duration
              }}<span class="remove" @click="removeSelectedCondition5()">
                ×</span
              >
            </button>
          </div>
          <div
            v-if="this.work_date && this.work_date !== '仅看指定日期'"
            class="condition"
          >
            <button class="condition-button">
              {{ work_date
              }}<span class="remove" @click="removeSelectedCondition6()">
                ×</span
              >
            </button>
          </div>
          <div v-if="this.wage" class="condition">
            <button class="condition-button">
              {{ wage
              }}<span class="remove" @click="removeSelectedCondition7()">
                ×</span
              >
            </button>
          </div>
          <div v-if="this.rate" class="condition">
            <button class="condition-button">
              {{ rate
              }}<span class="remove" @click="removeSelectedCondition8()">
                ×</span
              >
            </button>
          </div>
          <div v-if="this.distanceOrder" class="condition">
            <button class="condition-button">
              {{ distanceOrder
              }}<span class="remove" @click="removeSelectedCondition9()">
                ×</span
              >
            </button>
          </div>
          <div v-if="this.durationOrder" class="condition">
            <button class="condition-button">
              {{ durationOrder
              }}<span class="remove" @click="removeSelectedCondition10()">
                ×</span
              >
            </button>
          </div>
        </div>
      </div>
    </div>
    <el-row class="con" :gutter="20">
      <el-col :span="1"></el-col>
      <el-col :span="7">
        <div v-if="orderList" class="cardlist">
          <el-card
            v-for="(item, index) in orderList"
            :key="index"
            class="card"
            @click="get_details(item.id)"
          >
            <div class="top">
              <div class="time">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="date">{{ item.date }}</div>
              </div>
              <div class="price">{{ item.price + "¥" }}</div>
            </div>
            <div class="duration">{{ item.duration }}</div>
            <div class="content">
              <p class="info">{{ item.description }}</p>
            </div>
            <div class="divider"></div>
            <div class="bottom">
              <div class="owner">
                <el-avatar
                  class="avatar"
                  :src="getUserAvatar(item.customer_id)"
                />
                <div class="ownerId">ID:{{ item.customer_id }}</div>
              </div>
              <div class="ltype">{{ item.type }}</div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="subBackground">
          <div class="radio-groups" v-show="isRadioGroupVisible">
            <ul class="custom-radio-group">
              <div class="radiotitle">距离</div>
              <li>
                <input
                  type="radio"
                  v-model="distance"
                  value="5km内"
                  id="distance_5km"
                />
                <label for="distance_5km">5km内</label>
              </li>
              <li>
                <input
                  type="radio"
                  v-model="distance"
                  value="10km内"
                  id="distance_10km"
                />
                <label for="distance_10km">10km内</label>
              </li>
              <li>
                <input
                  type="radio"
                  v-model="distance"
                  value="30km内"
                  id="distance_30km"
                />
                <label for="distance_30km">30km内</label>
              </li>
              <li>
                <input
                  type="radio"
                  v-model="distance"
                  value="同城"
                  id="distance_same_city"
                />
                <label for="distance_same_city">同城</label>
              </li>
            </ul>

            <div class="divider"></div>

            <ul class="custom-radio-group">
              <div class="radiotitle">城市选择</div>
              <li>
                <el-select v-model="province" placeholder="省份" class="rate">
                  <el-option label="" value="">无</el-option>
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option
                  >qu
                </el-select>
              </li>
              <li>
                <el-select v-model="city" placeholder="城市" class="rate">
                  <el-option label="" value="">无</el-option>
                  <el-option
                    v-for="(item, index) in cities"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </li>
              <li>
                <el-select v-model="district" placeholder="区/县" class="rate">
                  <el-option label="" value="">无</el-option>
                  <el-option
                    v-for="(item, index) in districts"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </li>
            </ul>

            <div class="divider"></div>

            <ul class="custom-radio-group">
              <div class="radiotitle">人群要求</div>
              <li>
                <input
                  type="radio"
                  v-model="age"
                  value="大学生"
                  id="age_college"
                />
                <label for="age_college" class="custom-radio-label"
                  >大学生</label
                >
              </li>
              <li>
                <input
                  type="radio"
                  v-model="age"
                  value="22岁以上"
                  id="age_22"
                />
                <label for="age_22" class="custom-radio-label">22岁以上</label>
              </li>
              <li>
                <input
                  type="radio"
                  v-model="age"
                  value="30岁以上"
                  id="age_30"
                />
                <label for="age_30" class="custom-radio-label">30岁以上</label>
              </li>
              <li>
                <input
                  type="radio"
                  v-model="age"
                  value="40岁以上"
                  id="age_40"
                />
                <label for="age_40" class="custom-radio-label">40岁以上</label>
              </li>
              <li>
                <input type="radio" v-model="gender" value="男" id="man" />
                <label for="man" class="custom-radio-label">男</label>
              </li>
              <li>
                <input type="radio" v-model="gender" value="女" id="woman" />
                <label for="woman" class="custom-radio-label">女</label>
              </li>
            </ul>
            <div class="divider"></div>
            <ul class="custom-radio-group">
              <div class="radiotitle">时薪</div>
              <label>
                <input
                  type="number"
                  id="min_hourly_wage"
                  placeholder="最低时薪"
                />￥ -
                <input
                  type="number"
                  id="max_hourly_wage"
                  placeholder="最高时薪"
                />￥
                <button class="confirm" @click="submitwage()">确认</button>
              </label>
              <!-- 提交按钮 -->
            </ul>
            <div class="divider"></div>

            <ul class="custom-radio-group">
              <div class="radiotitle">类型</div>
              <li>
                <input type="radio" v-model="type" value="带宠" id="type_pet" />
                <label for="type_pet" class="custom-radio-label">带宠</label>
              </li>
              <li>
                <input
                  type="radio"
                  v-model="type"
                  value="带娃"
                  id="type_child"
                />
                <label for="type_child" class="custom-radio-label">带娃</label>
              </li>
              <li>
                <input
                  type="radio"
                  v-model="type"
                  value="收纳师"
                  id="type_caregiver"
                />
                <label for="type_caregiver" class="custom-radio-label"
                  >收纳师</label
                >
              </li>
            </ul>

            <div class="divider"></div>

            <ul class="custom-radio-group">
              <div class="radiotitle">时长</div>
              <li>
                <input
                  type="radio"
                  v-model="duration"
                  value="半天以内"
                  id="duration_half_day"
                />
                <label for="duration_half_day" class="custom-radio-label"
                  >半天以内</label
                >
              </li>
              <li>
                <input
                  type="radio"
                  v-model="duration"
                  value="一天以内"
                  id="duration_one_day"
                />
                <label for="duration_one_day" class="custom-radio-label"
                  >一天以内</label
                >
              </li>
              <li>
                <input
                  type="radio"
                  v-model="duration"
                  value="三天以内"
                  id="duration_three_days"
                />
                <label for="duration_three_days" class="custom-radio-label"
                  >三天以内</label
                >
              </li>
              <li>
                <input
                  type="radio"
                  v-model="duration"
                  value="三天以上"
                  id="duration_three_plus_days"
                />
                <label for="duration_three_plus_days" class="custom-radio-label"
                  >三天以上</label
                >
              </li>
            </ul>
            <div class="divider"></div>

            <ul class="custom-radio-group">
              <div class="radiotitle">工作日期</div>

              <li>
                <input
                  type="radio"
                  v-model="work_date"
                  value="仅看当天"
                  id="work_date_today"
                />
                <label for="work_date_today" class="custom-radio-label"
                  >仅看当天</label
                >
              </li>
              <li>
                <input
                  type="radio"
                  v-model="work_date"
                  value="仅看周末"
                  id="work_date_weekend"
                />
                <label for="work_date_weekend" class="custom-radio-label"
                  >仅看周末</label
                >
              </li>
              <li>
                <input
                  type="radio"
                  v-model="work_date"
                  value="仅看指定日期"
                  id="work_date_specific"
                />
                <label for="work_date_specific" class="custom-radio-label"
                  >仅看指定日期</label
                >
                <span v-if="work_date === '仅看指定日期'">
                  <input type="date" id="inputdate" value="2023-11-01" />
                  <button class="confirm" @click="submitdate()">确认</button>
                </span>
              </li>
            </ul>
            <div class="divider"></div>
            <!-- 排序条件 -->
            <ul class="custom-radio-group">
              <div class="radiotitle">更多</div>
              <div>
                <el-select
                  v-model="wage"
                  class="wage"
                  placeholder="薪资"
                  type="small"
                >
                  <el-option
                    label="时薪由高到低"
                    value="时薪由高到低"
                  ></el-option>
                  <el-option
                    label="总薪由高到低"
                    value="总薪由高到低"
                  ></el-option>
                </el-select>

                <el-select
                  v-model="rate"
                  class="rate"
                  placeholder="评分"
                  type="small"
                >
                  <el-option
                    label="评价分由高到低"
                    value="评价分由高到低"
                  ></el-option>
                  <el-option
                    label="信誉分由高到低"
                    value="信誉分由高到低"
                  ></el-option>
                </el-select>

                <el-select
                  v-model="distanceOrder"
                  class="distanceOrder"
                  placeholder="距离"
                  type="small"
                >
                  <el-option label="由远到近" value="由远到近"></el-option>
                  <el-option label="由近到远" value="由近到远"></el-option>
                </el-select>

                <el-select
                  v-model="durationOrder"
                  class="durationOrder"
                  placeholder="时长"
                  type="small"
                >
                  <el-option label="由短至长" value="由短至长"></el-option>
                  <el-option label="由长至短" value="由长至短"></el-option>
                </el-select>
              </div>
            </ul>
          </div>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <div>
                  <span class="title">{{ order.title }}</span>
                  <span class="rtype">{{ order.type }}</span>
                </div>

                <button
                  class="button"
                  style="vertical-align: middle"
                  @click="takeOrder(order_id)"
                >
                  <span>我要接单 </span>
                </button>
              </div>
            </template>
            <div class="rightInfo">
              <div class="rightOwner">
                <div class="rightOwnerLeft">
                  <el-avatar
                    class="avatar"
                    :size="60"
                    :src="getUserAvatar(order.customer_id)"
                  />
                  <!-- 这里要显示的是发单人的一些信息 -->
                  <div class="rightOwnerInfo">
                    <span class="">{{ customer.nick_name }}</span>
                    <span class="little">{{ customer.age }}岁</span>

                    <span class="little"
                      >信誉分：{{ customer.belief_score }}</span
                    >
                    <span class="little">{{ customer.gender }}</span>
                  </div>
                </div>
                <button
                  class="button"
                  style="vertical-align: middle"
                  @click="toUserInfo"
                >
                  <span>查看名片 </span>
                </button>
                <!-- 此处增加butten，跳转至名片详情页面 -->
              </div>

              <!-- 【！要求！】 -->
              <!--  -->
              <div class="details">
                <h3 class="subtitle">需求描述：</h3>
                <p>{{ order.description }}</p>
                <h3 class="subtitle">工作时间：</h3>
                <p>工作时间：{{ order.start_time }}</p>
                <p>工作时长：{{ order.dureation }}</p>
                <h3 class="subtitle">工作地点：</h3>
                <div>
                  <new_map
                    :local_latitude="order.latitude"
                    :local_longitude="order.longitude"
                  ></new_map>
                </div>
                <h3 class="subtitle">接单要求：</h3>
                <p>性别：{{ order.gender_requirement }}</p>
                <p>人群：{{ order.requirement }}</p>
                <p>其他：{{ order.demand }}</p>
              </div>
            </div>
          </el-card>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import new_map from "@/components/new_map.vue";
import { ElNotification } from "element-plus";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

export default {
  computed: {
    buttonLabel() {
      return this.isRadioGroupVisible ? "收起" : "筛选 or 排序";
    },
  },
  components: {
    new_map,
  },
  data() {
    return {
      store: useStore(),
      giveRecommendVisible: false,
      order_id: "",
      order: {
        title: "",
        customer_id: "",
        duration: "",
        type: "",
        description: "",
        release_time: "",
        date: "",
        start_time: "",
        end_time: "",
        latitude: "",
        longitude: "",
        gender_requirement: "",
        requirement: "",
      },
      customer: {
        nick_name: "",
        gender: "",
        age: "",
        belief_score: "",
      },
      orderList: null,
      user_data: [],
      selectTypes: "所有",
      searchInput: "",
      //   发布订单
      distance: "",
      latitude: "39.2321",
      longitude: "117.1234",
      age: "",
      gender: "",
      type: "",
      duration: "",
      work_date: "",
      wage: "",
      rate: "",
      distanceOrder: "",
      durationOrder: "",
      minHourlyWage: "", //最低时薪
      maxHourlyWage: "", //最高时薪
      // selectedConditions: [],
      showDirectory: true,
      isRadioGroupVisible: false,
      sortType: "时间",
      postOrderFormVisible: false,
      postOrderForm: {
        title: "",
        demand: "",
        type: "其他",
        start_end: "",
        price: "",
        requirement: "无",
        gender_requirement: "无",
        description: "",
        place_name: "",
      },
      target_people: [
        {
          value: "大学生",
          label: "大学生",
        },
        {
          value: "22岁以上",
          label: "22岁以上",
        },
        {
          value: "30岁以上",
          label: "30岁以上",
        },
        {
          value: "40岁以上",
          label: "40岁以上",
        },
        {
          value: "无",
          label: "无",
        },
      ],
      province: "",
      city: "",
      district: "",
      provinces: [],
      cities: [],
      districts: [],
    };
  },
  mounted() {
    this.Requst();
    // this.order_filter_and_sort();
    this.requestAvatar();
    // this.get_provinces();
    this.get_cities();
    this.get_districts();
  },
  watch: {
    distance: function () {
      this.order_filter_and_sort();
    },
    latitude: function () {
      this.order_filter_and_sort();
    },
    longitude: function () {
      this.order_filter_and_sort();
    },
    age: function () {
      this.order_filter_and_sort();
    },
    gender: function () {
      this.order_filter_and_sort();
    },
    type: function () {
      this.order_filter_and_sort();
    },
    duration: function () {
      this.order_filter_and_sort();
    },
    work_date: function () {
      this.order_filter_and_sort();
    },
    wage: function () {
      this.order_filter_and_sort();
    },
    rate: function () {
      this.order_filter_and_sort();
    },
    distanceOrder: function () {
      this.order_filter_and_sort();
    },
    durationOrder: function () {
      this.order_filter_and_sort();
    },
    minHourlyWage: function () {
      this.order_filter_and_sort();
    },
    maxHourlyWage: function () {
      this.order_filter_and_sort();
    },
    province: function () {
      this.order_filter_and_sort();
      this.get_cities();
    },
    city: function () {
      this.order_filter_and_sort();
      this.get_districts();
    },
    district: function () {
      this.order_filter_and_sort();
    },
  },
  methods: {
    Requst() {
      const params = new URLSearchParams();
      params.append("select", this.selectTypes);
      params.append("search", this.searchInput);
      this.axios.post("http://127.0.0.1:8000/order/", params).then((res) => {
        this.orderList = JSON.parse(res.data);
        this.get_details(this.orderList[0].id);
      });
    },
    requestAvatar() {
      this.axios.post("http://127.0.0.1:8000/userInfos/").then((res) => {
        if (res.data.success) {
          this.user_data = res.data.data;
        }
      });
    },
    getUserAvatar(customer_id) {
      for (let item of this.user_data) {
        if (item.id == customer_id) {
          return item.avatar;
        }
      }
    },
    get_details(id) {
      this.order_id = id;
      const params = new URLSearchParams();
      params.append("order_id", this.order_id);
      this.axios
        .post("http://127.0.0.1:8000/get_details/", params)
        .then((res) => {
          if (res.data.success) {
            this.order = res.data.data;
            // console.log(this.order.customer_id);
            this.get_customer();
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
    },
    giveRecommend() {
      const params = new URLSearchParams();
      params.append("longitude", this.longitude);
      params.append("latitude", this.latitude);
      params.append("user_id", this.store.state.user_id);
      console.log(this.store.state.user_id, 1);
      this.axios
        .post("http://127.0.0.1:8000/give_recommend/", params)
        .then((res) => {
          if (res.data.data == "信息不足") {
            this.giveRecommendVisible = true;
          } else {
            this.orderList = res.data.data;
            console.log(this.orderList);
          }
        });
    },
    get_customer() {
      const params = new URLSearchParams();
      params.append("customer_id", this.order.customer_id);
      this.axios
        .post("http://127.0.0.1:8000/get_customer/", params)
        .then((res) => {
          if (res.data.success) {
            this.customer = res.data.data;
            console.log(this.customer);
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
    },
    toUserInfo() {
      this.$router.push({
        path: "/UserInfo",
        query: {
          id: this.order.customer_id,
          order_id: this.order_id,
        },
      });
    },
    postOrder() {
      this.postOrderFormVisible = true;
    },
    removeSelectedCondition1() {
      this.distance = "";
    },
    removeSelectedCondition2() {
      this.age = "";
    },
    removeSelectedCondition3() {
      this.gender = "";
    },
    removeSelectedCondition4() {
      this.type = "";
    },
    removeSelectedCondition5() {
      this.duration = "";
    },
    removeSelectedCondition6() {
      this.work_date = "";
    },
    removeSelectedCondition7() {
      this.wage = "";
    },
    removeSelectedCondition8() {
      this.rate = "";
    },
    removeSelectedCondition9() {
      this.distanceOrder = "";
    },
    removeSelectedCondition10() {
      this.durationOrder = "";
    },
    removeSelectedCondition11() {
      this.minHourlyWage = "";
      this.maxHourlyWage = "";
    },
    toggleRadioGroup() {
      this.isRadioGroupVisible = !this.isRadioGroupVisible;
    },
    toggleDirectory() {
      this.showDirectory = !this.showDirectory;
    },
    order_filter_and_sort() {
      const params = new URLSearchParams();
      params.append("latitude", this.latitude);
      params.append("longitude", this.longitude);
      params.append("distance_info", this.distance);
      params.append("age_info", this.age);
      params.append("gender_info", this.gender);
      params.append("type_info", this.type);
      params.append("duration_info", this.duration);
      params.append("work_date_info", this.work_date);
      params.append("max_hour_wage", this.maxHourlyWage);
      params.append("min_hour_wage", this.minHourlyWage);
      params.append("wage_order_info", this.wage);
      params.append("rate_order_info", this.rate);
      params.append("distance_order_info", this.distanceOrder);
      params.append("duration_order_info", this.durationOrder);
      params.append("province", this.province);
      params.append("city", this.city);
      params.append("district", this.district);
      params.append("user_id", this.store.state.user_id);
      this.axios
        .post("http://127.0.0.1:8000/sort_and_filter/", params)
        .then((res) => {
          this.orderList = res.data.data;
          console.log(this.orderList);
        });
    },

    search() {
      // 找到类型为selectTypes和description中包含searchInput的值
      const params = new URLSearchParams();
      params.append("select", this.selectTypes);
      params.append("search", this.searchInput);
      this.axios.post("http://127.0.0.1:8000/order/", params).then((res) => {
        // 直接传过来res.data里就是要求的值
        this.orderList = JSON.parse(res.data);
        console.log(this.orderList);
      });
    },

    sort() {
      if (this.sortType[1] === "时间先后") {
        const data = this.orderList;
        const sortedData = data.sort((a, b) => {
          return a.start_time.localeCompare(b.start_time);
        });
        this.orderList = sortedData;
      } else if (this.sortType[1] === "时间后先") {
        const data = this.orderList;
        const sortedData = data.sort((a, b) => {
          return -a.start_time.localeCompare(b.start_time);
        });
        this.orderList = sortedData;
      } else if (this.sortType[1] === "价格高低") {
        const data = this.orderList;
        const sortedData = data.sort((a, b) => {
          return b.price - a.price;
        });
        this.orderList = sortedData;
      } else if (this.sortType[1] === "价格低高") {
        const data = this.orderList;
        const sortedData = data.sort((a, b) => {
          return a.price - b.price;
        });
        this.orderList = sortedData;
      }
    },
    submitwage() {
      const minHourlyWageInput = document.getElementById("min_hourly_wage");
      const maxHourlyWageInput = document.getElementById("max_hourly_wage");
      this.minHourlyWage = minHourlyWageInput.value;
      this.maxHourlyWage = maxHourlyWageInput.value;
    },
    submitdate() {
      const inputdate = document.getElementById("inputdate");
      this.work_date = inputdate.value;
    },
    takeOrder(id) {
      const params = new URLSearchParams();
      console.log("item.id:", id);
      params.append("order_id", id);
      this.axios
        .post("http://127.0.0.1:8000/take_order/", params)
        .then((res) => {
          if (!res.data.success) {
            ElNotification({
              title: res.data.title,
              message: res.data.message,
              type: "error",
            });
          } else {
            ElNotification({
              title: res.data.title,
              message: res.data.message,
              type: "success",
            });
          }
        });
    },
    checkForm() {
      const {
        title,
        demand,
        type,
        start_end,
        price,
        requirement,
        gender_requirement,
        description,
        place_name,
      } = this.postOrderForm;

      if (
        title === "" ||
        demand === "" ||
        type === "" ||
        start_end === "" ||
        price === "" ||
        requirement === "" ||
        gender_requirement === "" ||
        description === "" ||
        place_name === ""
      ) {
        console.log("请填写完整信息");
        ElMessage({
          message: "请填写完整信息！",
          type: "warning",
        });
      } else {
        this.submitOrder();
      }
    },
    submitOrder() {
      console.log(
        "fhdskhflaeaworhudkhvkjsdhgfuiahrlifhdsukdshfskdjdfhzd;ilhflfskDhgvk不错v路上的客户更快更方便在"
      );
      const form = JSON.stringify(this.postOrderForm);
      const params = new URLSearchParams();
      params.append("form", form);
      params.append("user_id", this.store.state.user_id);
      params.append("is_active", this.store.state.is_active);
      console.log(this.store.state.is_active, 1);
      this.axios
        .post("http://127.0.0.1:8000/submit_order/", params)
        .then((res) => {
          if (!res.data.success) {
            ElNotification({
              title: res.data.title,
              message: res.data.message,
              type: "error",
            });
          } else {
            ElNotification({
              title: res.data.title,
              message: res.data.message,
              type: "success",
            });
          }
        });
      this.postOrderFormVisible = false;
    },
    get_provinces() {
      const params = new URLSearchParams();
      this.axios
        .post("http://127.0.0.1:8000/give_provinces/", params)
        .then((res) => {
          this.provinces = res.data.data;
          console.log(this.provinces);
        });
    },
    get_cities() {
      const params = new URLSearchParams();
      params.append("province", this.province);
      this.axios
        .post("http://127.0.0.1:8000/give_cities/", params)
        .then((res) => {
          this.cities = res.data.data;
          console.log(this.cities);
        });
    },
    get_districts() {
      const params = new URLSearchParams();
      params.append("city", this.city);
      this.axios
        .post("http://127.0.0.1:8000/give_districts/", params)
        .then((res) => {
          this.districts = res.data.data;
          console.log(this.district);
        });
    },
    btnUserPage() {
      this.$router.push({
        path: "/UserPage",
      });
    },
  },
};
</script>

<style scoped>
.card {
  width: 80%;
  margin: 15px 0 15px 0;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  margin-left: 10%;
}

.el-card {
  --el-card-padding: none;
}

.card:hover {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
  /* 鼠标悬停时阴影加深 */
  cursor: pointer;
  /* 鼠标变为手型指示链接 */
}

.owner {
  display: flex;
  justify-content: space-between;
}

.top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  align-items: center;
  justify-content: center;
}

.duration {
  padding: 25px;
  padding-bottom: 0;
  padding-top: 0;
  display: flex;
  justify-content: right;
  color: gray;
}

.time {
  display: flex;
}

.date {
  padding-left: 5px;
  padding-top: 5px;
  color: gray;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.info {
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: rgb(255, 0, 0);
}

.divider {
  margin: 10px 0 0 0;
  height: 2px;
  background-color: #f0f0f0;
}

.bottom {
  background: linear-gradient(to right, #cdd2e8, #ffffff);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  color: gray;
}

.content {
  padding: 20px;
  padding-top: 0;
  padding-bottom: 0;
  color: #504b4b;
}

.ownerId,
.ltype {
  padding: 8px;
}

.background {
  background: linear-gradient(rgb(255, 236, 254), white);
  font-family: sans-serif;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 40px;
}

.title {
  font-size: 20px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  letter-spacing: 2px;
  font-weight: bolder;
}

.rtype {
  padding: 5px 13px;
  background-color: lavender;
  border-radius: 10px;
  margin-left: 13px;
  max-height: 16px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: bold;
}
.box-card {
  width: 100%;
  margin: 0;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: red;
}
/* 发单人 */

.little {
  color: gray;
  font-size: 15px;
}
.rightOwner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.rightOwnerLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.rightOwnerInfo {
  display: flex;
  padding: 10px;
}
.rightOwnerInfo span {
  margin: 0 10px;
}
.rightInfo {
  padding: 23px 40px;
}

.button1 {
  margin: 20px;
  display: inline-block;
  border-radius: 4px;
  /* 改色系 */
  background-color: #666699;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 115px;
  transition: all 0.5s;
  cursor: pointer;
  height: 40px;
}

.button {
  display: inline-block;
  border-radius: 4px;
  /* 改色系 */
  background-color: #666699;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
}

.button1:hover {
  margin: 20px;
  /* 改色系 */
  background-color: #666699ba;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: "»";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
/* 订单信息 */
.subtitle {
  margin: 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  line-height: 22px;
}

.details p {
  font-size: 14px;
  color: #222;
  line-height: 24px;
  text-align: justify;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 搜索框 */

/* 外部盒子,控制搜索框在页面中的位置 */
.searchcontainer {
  height: 10vh;
  display: flex;
  justify-content: center; /*水平方向居中*/
  align-items: center; /*垂直方向居中*/
}
/* 搜索框样式 */
.search {
  width: 400px;
  height: 45px;
  padding-left: 20px;
  background-position: 10px 10px; /*设置背景图片的位置*/
  color: darkgray;
  font-size: 15px;
  border: none; /*去除边框*/
}
/* 搜索框获得焦点时样式 */
.search:focus {
  outline: #666699ba solid 1px; /*添加外边框*/
}
/* 搜索按钮样式 */
.btnsearch {
  width: 90px;
  height: 47px;
  border: none;
  /* 改色系：深色按钮 */
  background-color: #666699;
  color: #fff;
  border-radius: 0px 20px 20px 0px;
  font-size: 16px;
  cursor: pointer;
}
/* 按钮悬浮时样式 */
.btnsearch:hover {
  background-color: #666699ba;
}

.icon {
  display: flex;
  height: 45px;
  padding-left: 20px;
  padding-top: 11px;

  background-color: #fff;
  border-radius: 30px 0px 0px 30px;
  font-size: 24px;
}

.cardlist {
  background-color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 70vh;
  border: 1px solid #95b6fcd9;
  border-radius: 20px;
}
.subBackground {
  overflow-y: scroll;
  overflow-x: hidden;

  height: 70vh;
  width: 90%;
  border: 1px solid #95b6fcd9;
  border-radius: 20px;
}
/* 隐藏滚动条 */
/* ::-webkit-scrollbar {
  display: none;
} */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101f1c, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color 0.3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.3);
}
.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  margin: 0 auto !important;
  height: 80px;
  overflow: hidden;
}

/* 原订单页面 */

.radio-groups {
  padding: 10px;
  margin: 0 0 10px 0;
  border: 2px solid #f0f0f0;
  border-radius: 5px;
  background-color: white;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 100%;
  /* width: 1300px; */
}

.custom-radio-group {
  display: flex;
  list-style: none;
  padding: 0;
  font-weight: 300;
  color: rgb(49, 49, 49);
  font-size: 14px;
  align-items: center;
}

.custom-radio-group li {
  margin-right: 10px;
}

.custom-radio-group label {
  display: inline-block;
  padding: 5px 20px;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
}

.custom-radio-group input[type="radio"] {
  display: none;
}

.custom-radio-group input[type="radio"]:checked + label {
  color: red;
  font-weight: 1000;
}

.custom-radio-group input[type="radio"]:not(:checked):hover + label {
  color: rgb(233, 70, 11);
}

.radiotitle {
  font-weight: 1000;
  flex-basis: 10%;
  padding-top: 5px;
}

.radiotitle2 {
  font-weight: 1000;

  font-size: small;
}

.divider {
  height: 1.5px;
  background-color: #f0f0f0;
}

.wage {
  padding-top: 10px;
  margin-left: 15px;
  width: 130px;
}

.rate {
  padding-top: 10px;
  margin-left: 15px;
  width: 130px;
}

.distanceOrder {
  padding-top: 10px;
  margin-left: 15px;
  width: 130px;
}

.durationOrder {
  padding-top: 10px;
  margin-left: 15px;
  width: 130px;
}

#min_hourly_wage {
  padding: 5px;
  border-radius: 3px;
  border: 2px solid #f0f0f0;
}

#max_hourly_wage {
  padding: 5px;
  border-radius: 3px;
  border: 2px solid #f0f0f0;
}

#inputdate {
  padding: 5px;
  border-radius: 3px;
  border: 2px solid #f0f0f0;
}

.confirm {
  margin-left: 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  padding: 3px 6px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.confirm:hover {
  background-color: blue;
}

.confirm:active {
  background-color: #a0cfff;
}

.condition-button {
  margin-left: 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  padding: 3px 6px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.condition-button:hover {
  background-color: blue;
}

.condition-button:active {
  background-color: #a0cfff;
}

.selected-conditions {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-left: 45vh;
}

.remove {
  font-size: 15px;
  font-weight: 1000;
}
.subtop {
  height: 6vh;
}
</style>
